<template>
  <div>
    <div>
      <TbTitle level="2" :title="`（一）、${examineYear}年度举办展览会、博览会、交易会情况`" />
      <div style="display: flex; align-items: center;margin-bottom: 10px;">
        本年度是否开展活动：
        <el-radio-group v-model="radio1" disabled>
          <el-radio-button label="1">已开展</el-radio-button>
          <el-radio-button label="2">未开展</el-radio-button>
        </el-radio-group>
      </div>
      <el-table :header-cell-style="{ background: '#f0f7fc', color: '#000' }" :data="detailInfo.expositionList" border>
        <el-table-column type=" index" align="center" width="70" label="序号">
        </el-table-column>
        <el-table-column prop="activityName" align="center" label="活动具体名称"> </el-table-column>
        <el-table-column prop="activityCycle" align="center" label="时间或周期"> </el-table-column>
        <el-table-column prop="scale" align="center" label="规模(㎡)"> </el-table-column>
        <el-table-column prop="transactionAmount" align="center" label="成交额(万元)" width="250px">
        </el-table-column>
        <el-table-column prop="manufacturerNum" align="center" label="参展厂商数">
        </el-table-column>
        <el-table-column prop="participateNum" align="center" label="参观人次数">
        </el-table-column>
      </el-table>
    </div>
    <div>
      <TbTitle level="2" :title="`（二）、${examineYear}年度举办研讨会、论坛活动的情况`" />
      <div style="display: flex; align-items: center;margin-bottom: 10px;">
        本年度是否开展活动：
        <el-radio-group v-model="radio2" disabled>
          <el-radio-button label="1">已开展</el-radio-button>
          <el-radio-button label="2">未开展</el-radio-button>
        </el-radio-group>
      </div>
      <el-table :header-cell-style="{ background: '#f0f7fc', color: '#000' }" :data="detailInfo.workshopList" border>
        <el-table-column type="index" align="center" width="70" label="序号">
        </el-table-column>
        <el-table-column prop="activityName" align="center" label="活动名称"> </el-table-column>
        <el-table-column prop="participateNum" align="center" label="参加人数"> </el-table-column>
        <el-table-column prop="organizingMethod" align="center" label="举办方式">
          <template #default="scope">
            {{ dictToVal(dict1, scope.row.organizingMethod) }}
          </template>
        </el-table-column>
        <el-table-column prop="address" align="center" label="地点" width="250px">
        </el-table-column>
        <el-table-column prop="fundingSource" align="center" label="经费来源">
          <template #default="scope">
            {{ dictToVal(dict2, scope.row.fundingSource) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <TbTitle level="2" title="（三）、按照渝评组发〔2013〕1号、渝民发〔2014〕30号文规定，经批准的评比达标表彰活动的情况" />
      <div style="display: flex; align-items: center;margin-bottom: 10px;">
        本年度是否开展活动：
        <el-radio-group v-model="radio3" disabled>
          <el-radio-button label="1">已开展</el-radio-button>
          <el-radio-button label="2">未开展</el-radio-button>
        </el-radio-group>
      </div>
      <el-table :header-cell-style="{ background: '#f0f7fc', color: '#000' }" :data="detailInfo.evaluationList" border>
        <el-table-column type="index" align="center" width="70" label="序号">
        </el-table-column>
        <el-table-column prop="activityName" align="center" label="项目名称"> </el-table-column>
        <el-table-column prop="holdingTime" align="center" label="起始时间"> </el-table-column>
        <el-table-column prop="activityCycle" align="center" label="活动周期"> </el-table-column>
        <el-table-column prop="activityClass" align="center" label="评选范围或评比对象"> </el-table-column>
        <el-table-column prop="approvalAuthority" align="center" label="批准单位"> </el-table-column>
        <el-table-column prop="fundingSource" align="center" label="经费来源">
          <template #default="scope">
            {{ dictToVal(dict2, scope.row.fundingSource) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <TbTitle level="2" :title="`（四）、${examineYear}年度举办培训、职称评审、认证、鉴定等活动的情况`" />
      <div style="display: flex; align-items: center;margin-bottom: 10px;">
        本年度是否开展活动：
        <el-radio-group v-model="radio4" disabled>
          <el-radio-button label="1">已开展</el-radio-button>
          <el-radio-button label="2">未开展</el-radio-button>
        </el-radio-group>
      </div>
      <el-table :header-cell-style="{ background: '#f0f7fc', color: '#000' }" :data="detailInfo.trainList" border>
        <el-table-column type="index" align="center" width="70" label="序号">
        </el-table-column>
        <el-table-column prop="activityName" align="center" label="活动名称"> </el-table-column>
        <el-table-column prop="activityType" align="center" label="类型"> </el-table-column>
        <el-table-column prop="activityCycle" align="center" label="时间或周期"> </el-table-column>
        <el-table-column prop="activityClass" align="center" label="对象"> </el-table-column>
        <el-table-column prop="address" align="center" label="地点"> </el-table-column>
        <el-table-column prop="approvalAuthority" align="center" label="批准单位"> </el-table-column>
        <el-table-column prop="fundingSource" align="center" label="经费来源">
          <template #default="scope">
            {{ dictToVal(dict2, scope.row.fundingSource) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import TbTitle from '@/views/yearCheck/components/TbTitle.vue'
import { reactive, ref, inject, getCurrentInstance } from 'vue'
import { getDictSourceFunding, getDictEventMethod } from '@/api/dict/index'

const { proxy } = getCurrentInstance();
const dictToVal = proxy.$dictToVal
const radio1 = ref(1)
const radio2 = ref(1)
const radio3 = ref(1)
const radio4 = ref(1)
const dict1 = ref([])
const dict2 = ref([])
const examineYear = ref()


let detailInfo = ref({})
const { getDetailInfo } = inject('getDetailInfo')

getDetailInfo().then(res => {
  const { evaluationList, expositionList, trainList, workshopList } = res.data
  detailInfo.value = res.data
  examineYear.value = res.examineYear
  radio1.value = expositionList && expositionList.length ? 1 : 2
  radio2.value = workshopList && workshopList.length ? 1 : 2
  radio3.value = evaluationList && evaluationList.length ? 1 : 2
  radio4.value = trainList && trainList.length ? 1 : 2
})

let getDictInfo = () => {
  //举办方式
  getDictEventMethod().then(res => {
    dict1.value = res.data
  })
  //经费来源
  getDictSourceFunding().then(res => {
    dict2.value = res.data
  })
}
getDictInfo()
</script>
<style lang="scss" scoped>
.msg-tip {
  padding: 20px 0;
  color: #000;

  font-family: '微软雅黑';
}

table {
  border-spacing: 0px;
  width: 100%;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  color: #000;

  thead {
    background: #f5f7fa;
    color: rgb(37, 43, 53);

    th {
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      text-align: center;
      height: 40px;
    }
  }

  tbody {
    td {
      height: 40px;
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      text-align: center;

      &.td-head {
        background: #f5f7fa;
      }
    }
  }
}
</style>
